Vue 3
Vue Devtools 不支持 Vue3 Vuex
通过使用 vuex 提供的 createLogger 插件，在 console 中查看
Vue Router 页面跳转数据不更新
我的解决方案:location.href='/room/xxxx'
官方解决方案
- v4.x | 带参数的动态路由匹配 | Vue Router
- v3.x | 动态路由匹配 | Vue Router
- Vue Router 10 条高级技巧 - SegmentFault 思否
- vue路由跳转不刷新 - SegmentFault 思否
数据绑定v-model
v-model默认绑定的是value，针对表单数据的。如果是自定义组件，记得修改监听
在Vue3中提供了modelValue和update:modelValue，对应v-model的使用
自定义组件使用数据流双向绑定时，需要设置为其他的，否则还是单向的数据
在使用props作为响应式时一定是用toRefs()解耦操作
实现对任意父子组件数据的双向绑定
子组件
<template>
{{ jsonRef }}
<button @click="addJson">add</button>
</template>
<script>
import { ref, watch,toRefs } from 'vue'
export default {
props: ['json'],
emits: ['update:json'],
setup(props, context) {
// 这样是不行的，怎么说呢，就是这个数据太深入了监听不到
// const jsonRef = ref(props.json)
//应该是这样的***********
const { json: jsonRef } = toRefs(props)
const addJson = () => {
jsonRef.value += 1
}
//自定义事件中可以进行watch对数据进行更新
watch(jsonRef, () => {
context.emit('update:json', jsonRef.value)
})
return { jsonRef, addJson }
},
}
</script>父组件
<template>
<div class="home">This is the home page</div>
<Test v-model:json="json" />
</template>
<script>
import Test from '@/components/Test.vue'
import { ref, watch } from 'vue'
export default {
name: 'Home',
components: { Test },
setup() {
const json = ref('hello emit')
// 父组件监听数据
watch(json, () => console.log(json.value))
return { json }
},
}
</script>响应式遇到的问题
- 在使用 ref 时记得 return
- 使用 ref 时记得加
.value - 使用 reactive 传输数据时可以使用
toRaw还原数据 - 数据响应式可能会延迟，使用
watch对数据进行监听
生命周期
除了beforecate和created(它们被setup方法本身所取代)，我们可以在setup方法中访问的API生命周期钩子有9个选项:
- onBeforeMount – 在挂载开始之前被调用：相关的 render 函数首次被调用。
- onMounted – 组件挂载时调用
- onBeforeUpdate – 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
- onUpdated – 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
- onBeforeUnmount – 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
- onUnmounted – 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
- onActivated – 被 keep-alive 缓存的组件激活时调用。
- onDeactivated – 被 keep-alive 缓存的组件停用时调用。
- onErrorCaptured – 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
Vue 3 生命周期完整指南 - SegmentFault 思否
在 Vue 中如何在模板中使用其他库函数
在 setup 中写新的函数调用库函数
模板调用
{{ dateTimeFormat(datetime) }}
函数设定
const dateTimeFormat = datetime =>
dayjs(datetime).format("YYYY-MM-DD HH:mm:ss");